<template>
	<div class="account">
		<div class="user_radius">
			<div class="balance_div">
				<h2>
					{{ info.profitAccountBalance }}
				</h2>
				<h4>
					可提现(可用)金额(元)
				</h4>
			</div>
			<div class="balance_div">
				<h2>
					{{ info.mainAccountBalance }}
				</h2>
				<h4>
					余额(元)
				</h4>
			</div>
			<div class="balance_div">
				<h2>
					{{ info.inPrice }}
				</h2>
				<h4>
					总收入(元)
				</h4>
			</div>
			<div class="balance_div">
				<h2>
					{{ info.outPrice }}
				</h2>
				<h4>
					总支出(元)
				</h4>
			</div>
			<!-- <div class="balance_div">
		          <h2>
		          	 {{ info.glodAccountBalance }}
		          </h2>
		          <h4>
		          	系统备付金账户(元)
		          </h4>
		       </div> -->
		</div>
    <div class="user_radius">
    	<div class="balance_div">
    		<h2>
    			{{ info.tomorrowNum }}
    		</h2>
    		<h4>
    			明日预计提现金额(元)
    		</h4>
    	</div>
    	<div class="balance_div">
    		<h2>
    			{{ info.todayNum }}
    		</h2>
    		<h4>
    			今日实际提现金额(元)
    		</h4>
    	</div>
    	<div class="balance_div">
    		<h2>
    			{{ info.couponNum }}
    		</h2>
    		<h4>
    			抵价券总数(元)
    		</h4>
    	</div>
    	<div class="balance_div">
    		<h2>
    			{{ info.storeNum }}
    		</h2>
    		<h4>
    			商家货款总数(元)
    		</h4>
    	</div>
    </div>
		<div>
			<div style="display: flex;justify-content: space-between;">
				<el-form ref="form" :model="form" label-width="200px">
					<el-form-item label="姓名">
						<el-input style="width: 200px;" v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="开户行名称">
						<el-input style="width: 200px;" v-model="form.bankName"></el-input>
					</el-form-item>
					<el-form-item label="开户行支行名称">
						<el-input style="width: 200px;" v-model="form.bankBranchName"></el-input>
					</el-form-item>
					<el-form-item label="银行卡号">
						<el-input style="width: 200px;" v-model="form.bankCardNo"></el-input>
					</el-form-item>
					<el-form-item label="联系人手机号">
						<el-input style="width: 200px;" v-model="form.phoneNum"></el-input>
					</el-form-item>
					<el-form-item label="金额">
						<el-input style="width: 200px;" v-model="form.amt"></el-input>
					</el-form-item>


					<el-form-item>
						<el-button type="primary" @click="onSubmit">代付到银行卡</el-button>
					</el-form-item>
				</el-form>
				<el-form ref="form" :model="form" label-width="200px">
					<el-form-item>
						<el-button type="primary" @click="editPayPwd">修改支付密码</el-button>
					</el-form-item>
				</el-form>
			</div>

			<el-dialog
			  title="输入密码"
			  :visible.sync="dialogVisible"
			  width="30%"
			  >
			  <div>
				  <el-form ref="form" :model="pasd" label-width="120px">
				  	<el-form-item label="输入转账密码">
				  		<el-input style="width: 120px;" v-model="pasd.num"></el-input>
				  	</el-form-item>
				  	<el-form-item>
				  		<el-button type="primary" @click="confirmSubmit">确认密码</el-button>
				  	</el-form-item>
				  </el-form>
			  </div>
			</el-dialog>

			<el-dialog
			  title="修改支付密码"
			  :visible.sync="dialogVisibleEditPay"
			  width="30%"
			  >
			  <div>
				  <el-form ref="form" :model="editPasd" label-width="120px">
				  	<el-form-item label="输入转账密码">
				  		<el-input style="width: 120px;" v-model="editPasd.num"></el-input>
				  	</el-form-item>
					<el-form-item label="手机号">
						<el-input style="width: 120px;" v-model="editPasd.value"></el-input>
						<el-button id="code" type="primary" :disabled="cantclick == true" @click="getcode">获取验证码</el-button>
					</el-form-item>
					<el-form-item label="输入验证码">
						<el-input style="width: 120px;" v-model="editPasd.code"></el-input>
					</el-form-item>
				  	<el-form-item>
				  		<el-button type="primary" @click="confirmEditSubmit">确认修改密码</el-button>
				  	</el-form-item>
				  </el-form>
			  </div>
			</el-dialog>
		</div>
	</div>
</template>
<style type="text/css">
	.user_radius {
		width: 100%;
		height: auto;
		border: 1px solid #BFCBD9;
		border-radius: 15px;
		text-align: center;
		margin: 20px 0 30px 0;
		padding: 20px 30px;
		font-size: 16px;
		font-weight: bold;
		display: flex;
		justify-content: space-around;
	}

	.balance_div {
		width: 25%;
		text-align: center
	}
</style>
<script>
	export default {
		data() {
			return {
				title: '用户列表',
				table_loading: false,
				dialogVisibleEditPay: false,
				info: {
					mainAccountBalance: 0,
					profitAccountBalance: 0,
					glodAccountBalance: 0,
					inPrice: 0,
					outPrice: 0,
          todayNum:0,
          tomorrowNum:0,
          couponNum:0,
          storeNum:0
				},
				pasd: {
					num: ''
				},
				editPasd: {
					num: '',
					value: '',
					code: ''
				},
				dialogVisible: false,
				cantclick: false,
				form: {
					name: '',
					bankCardNo: '',
					bankName: '',
					bankBranchName: '',
					phoneNum: '',
					amt: ''
				},
				firstCode: '',
			}
		},
		created() {
			this.fetchData();
		},
		methods: {

			fetchData() {
				this.dataApi.ajax('accountBalance', null, res => {
					if (res.responseType === 'S') {
						console.log(res, '账号收益')
						this.info = res
					}
				});

			},
			confirmSubmit() {
				let vm = this
				let data = {
					sysCode: 'pwd',
				}
				vm.dataApi.ajax('singleSysParamById', data, res => {
					console.log(res)
					if (res.responseType === 'S') {
						let value = res.sysValue
						if(this.pasd.num == value) {
							this.pay()
						} else{
							this.showMsg('密码不正确，请检查密码再次转账')
						}
					}
				})
			},
			pay() {
				let vm = this
				vm.dataApi.ajax('payBatchAccount', vm.form, res => {
					if (res.responseType === 'S') {
						vm.showMsg('代付成功')
						vm.fetchData()
						vm.form = {
							name: '',
							bankCardNo: '',
							bankName: '',
							bankBranchName: '',
							phoneNum: '',
							amt: '',
						}
					}
				});
			},
			onSubmit(){
				let vm = this
				if(vm.form.name == "") {
					vm.showMsg('名称必填')
					return
				}
				if(vm.form.bankName == "") {
					vm.showMsg('银行开户名必填')
					return
				}
				if(vm.form.bankCardNo == "") {
					vm.showMsg('银行卡号必填')
					return
				}
				if(vm.form.phoneNum == "") {
					vm.showMsg('联系手机号必填')
					return
				}
				if(vm.form.amt == "") {
					vm.showMsg('代付金额必填')
					return
				}
				vm.dialogVisible = true

			},
			editPayPwd() {
				this.dialogVisibleEditPay = true
			},
			getcode() {
				if (!this.editPasd.value) {
					this.$message({
						message: '请输入手机号',
						type: 'warning'
					});
					return;
				}
				if(this.editPasd.value != '13566038545') {
					this.$message({
						message: '此手机号没权限',
						type: 'warning'
					});
					return;
				}
				var _this = this
				var data = {
					phone: this.editPasd.value,
					yzm: 'YZM'
				}
				this.dataApi.ajax('sendMessage', data, res => {
					if (res.responseType === 'S') {
						this.firstCode = res.code
						var i = 60;
						var Code = document.getElementById("code");
						var timer = setInterval(function() {
							if (i == 0) {
								Code.innerText = "获取验证码"
								// Code.style.backgroundColor='#0AC0EF';

								clearInterval(timer)
								_this.cantclick = false

							} else {
								Code.innerText = Math.floor(i) + '秒';
								--i;
								Code.style.width = '80px';
								_this.cantclick = true;
							}
						}, 1000);
					}
				})
			},
			confirmEditSubmit(){
				let vm = this
				if(vm.firstCode != vm.editPasd.code) {
					vm.$message({
						message: '验证码错误',
						type: 'warning'
					});
					return
				}
				let data = {
					sysCode: 'pwd',
					sysValue: vm.editPasd.num
				}
				vm.dataApi.ajax('editSysParam', data, res => {
					if (res.responseType === 'S') {
						vm.showMsg('修改成功')
						vm.dialogVisibleEditPay = false
					}
				})
			}

		}
	}
</script>
